<template>
    <template v-for="item in ownMenuList" :key="item.id">
        <el-sub-menu
            v-if="item.children && item.children.length > 0"
            :index="item.id.toString()"
        >
            <template v-slot:title>
                <span
                    class="single-ellipsis"
                    :style="`padding-left:${item.level*18}px;padding-right:${item.level*30}px`"
                    @click="getDataById(item,$event)"
                >{{item.label}}</span>
            </template>
            <MenuList v-model:menuList="item.children" @closeMenu="emitsCloseMenu"></MenuList>
        </el-sub-menu>
        <el-menu-item
            v-else :index="item.id.toString()"
            :class="`before-left-${item.level}`"
        >
            <template v-slot:title>
                <span
                    class="single-ellipsis"
                    :style="`padding-left:${item.level*18}px;padding-right:${item.level*18}px`"
                    @click.stop="getDataById(item,$event)"
                >{{item.label}}</span>
            </template>
        </el-menu-item>
    </template>
</template>

<script setup>
// 接收来自父组件的传值
const propsValue=defineProps({
    menuList:{
        type:Array,
        default(){
            return [
                {
                    label:"", //菜单名称
                    id:"", //标识id
                    parentId:"", //父级菜单标识id
                    level:1, //当前递归所在层级
                    children:[] //子级菜单数组集
                }
            ];
        }
    }
});
// 暴露父组件的自定义方法
const emits=defineEmits(["update:menuList","closeMenu"]);

// 组件自身的配置项
let ownMenuList=computed({
    get(){
        return propsValue.menuList;
    },
    set(val){
        emits("update:menuList",val);
    }
});

// 接收祖组件注入的方法--必须先接收
const getData=inject("getData");

// 触发接收来自祖组件注入的自定义方法
const getDataById=(item,e)=>{
    // console.log(item.id,e.target,0);
    emitsCloseMenu(item);
    getData(item,e);
};
const emitsCloseMenu=(item)=>{
    // console.log(id)
    emits("closeMenu",item);
}

defineExpose({
    ownMenuList,
    getDataById
});



</script>

<style lang="scss">
@for $i from 1 through 10 {
    .before-left-#{$i}{
        &::before{
            left:(10px * (2 * $i - 2)) !important;
        }
    }
}

</style>
